Adwaita: limit scope of :backdrop

- most controls don't have:backdrop state
- different :backdrop state reserved for windows, headebars and toolbars
  and some buttons

Fixes https://gitlab.gnome.org/GNOME/gtk/-/issues/2694

diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss
index 32c699869640ea698762a9be8cf613393618153d..d58d0b633597d97a5f229bdec39848adc941b79d 100644 (file)
--- a/gtk/theme/Adwaita/_colors.scss
+++ b/gtk/theme/Adwaita/_colors.scss
@@ -60,12 +60,6 @@ $backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color,
 $backdrop_selected_fg_color: if($variant == 'light', $backdrop_base_color, $backdrop_text_color);
 $backdrop_borders_color: mix($borders_color, $bg_color, 80%);
 $backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
-$backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, 50%);
-
-$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%);
-$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%);
-
-$backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, 20%));
 
 //special cased widget colors
 $suggested_bg_color: $selected_bg_color;

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 33dd5d6fade4292a8e25545136ddd34dafa5b445..e4d36d8b914ef86fbf568fdc6e5ba3f02666bc69 100644 (file)
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -21,8 +21,6 @@ $button_fill: null; // global var defined within a parameter driven mixin. See i
   background-color: $bg_color;
 
   &:backdrop {
-    color: $backdrop_fg_color;
-    background-color: $backdrop_bg_color;
     text-shadow: none;
     -gtk-icon-shadow: none;
   }
@@ -59,12 +57,6 @@ treeview.expander:disabled { -gtk-icon-filter: opacity(0.5); }
   color: $text_color;
   background-color: $base_color;
 
-  &:backdrop {
-    color: $backdrop_text_color;
-    background-color: $backdrop_base_color;
-    &:disabled { color: $backdrop_insensitive_color; }
-  }
-
   &:disabled {
     color: $insensitive_fg_color;
     background-color: $insensitive_bg_color;
@@ -137,7 +129,6 @@ flowbox {
   border-radius: 0;
   padding: 0;
 
-  &:backdrop { background-color: if($variant=='light', transparent, darken($backdrop_base_color,5%)); }
   &:active, &:selected { background-color: if($variant=='light', transparent, $selected_bg_color); }
   &:disabled { background-color: if($variant=='light', transparent, $insensitive_bg_color); }
 }
@@ -161,18 +152,9 @@ label {
 
     button & { color: inherit; }
 
-    &:backdrop {
-      color: $backdrop_insensitive_color;
-
-      button & { color: inherit; }
-    }
-
     > selection { @extend %selected_items_disabled; }
   }
 
-  &:backdrop {
-    > selection { @extend %selected_items_backdrop; }
-  }
 }
 
 .dim-label {
@@ -185,10 +167,6 @@ window.assistant {
     background-color: $base_color;
     border-top: 1px solid $borders_color;
 
-    &:backdrop {
-      background-color: $backdrop_base_color;
-      border-color: $backdrop_borders_color;
-    }
   }
 
   &.csd .sidebar { border-top-style: none; }
@@ -207,10 +185,6 @@ window.assistant {
   text-shadow: 0 1px black;
   -gtk-icon-shadow: 0 1px black;
 
-  &:backdrop {
-    text-shadow: none;
-    -gtk-icon-shadow: none;
-  }
 }
 
 
@@ -326,14 +300,6 @@ entry {
 
     &:disabled { @include entry(insensitive); }
 
-    &:backdrop {
-      @include entry(backdrop);
-
-      transition: $backdrop_transition;
-    }
-
-    &:backdrop:disabled { @include entry(backdrop-insensitive); }
-
     > text > selection { @extend %selected_items; }
 
     // entry error and warning style
@@ -357,7 +323,6 @@ entry {
 
       &:active { color: $selected_bg_color; }
 
-      &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); }
     }
 
     &.password image.caps-lock-indicator {
@@ -376,8 +341,6 @@ entry {
 
       &:focus-within { @include entry(osd-focus); }
 
-      &:backdrop { @include entry(osd-backdrop); }
-
       &:disabled { @include entry(osd-insensitive); }
     }
   }
@@ -395,7 +358,6 @@ entry {
     border-style: solid;
     box-shadow: none;
 
-    &:backdrop { background-color: transparent; }
   }
 
    // linked entries
@@ -414,8 +376,6 @@ entry {
     &:not(:disabled) + entry:not(:disabled),
     &:not(:disabled) + %entry:not(:disabled) {
       border-top-color: mix($borders_color, $base_color, 30%);
-
-      &:backdrop { border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); }
     }
 
     // brighter border between linked insensitive entries
@@ -618,20 +578,6 @@ button {
       border: none;
       box-shadow: none;
     }
-
-    &:disabled {
-      &:backdrop, & {
-        @include button(osd-insensitive);
-
-        border: none;
-      }
-    }
-
-    &:backdrop {
-      @include button(osd-backdrop);
-
-      border: none;
-    }
   }
 
   //overlay / OSD style
@@ -646,8 +592,6 @@ button {
 
     &:disabled { &:backdrop, & { @include button(osd-insensitive); }}
 
-    &:backdrop { @include button(osd-backdrop); }
-
     &.flat {
       @include button(undecorated);
 
@@ -664,8 +608,6 @@ button {
         box-shadow: none;
       }
 
-      &:backdrop { @include button(undecorated); }
-
       &:active,
       &:checked { @include button(osd-active); }
     }
@@ -689,23 +631,8 @@ button {
       &:active,
       &:checked { @include button(active, $b_color, white); }
 
-      &:backdrop,
-      &.flat:backdrop {
-        @include button(backdrop, $b_color, white);
-
-        &:active,
-        &:checked { @include button(backdrop-active, $b_color, white); }
-
-        &:disabled {
-          @include button(backdrop-insensitive);
-
-          &:active,
-          &:checked { @include button(backdrop-insensitive-active, $b_color, white); }
-        }
-      }
-
       &.flat {
-        &:backdrop, &:disabled, &:backdrop:disabled {
+        &:disabled {
           @include button(undecorated);
 
           color: transparentize($b_color, 0.2);
@@ -729,7 +656,6 @@ button {
 
         &:disabled { &:backdrop, & { @include button(osd-insensitive, $b_color); }}
 
-        &:backdrop { @include button(osd-backdrop, $b_color); }
       }
     }
   }
@@ -885,13 +811,10 @@ modelbutton.flat {
   &:disabled {
     color: $insensitive_fg_color;
 
-    &:backdrop { color: $backdrop_insensitive_color; }
+
   }
 
   &:selected { @extend %selected_items; }
-
-  &:backdrop,
-  &:backdrop:hover { @extend %undecorated_button; }
 }
 
 modelbutton.flat arrow {
@@ -936,7 +859,6 @@ button.color {
   @if $variant == 'light' {
     .osd &, & {
       &:disabled,
-      &:backdrop,
       &:active,
       &:checked { colorswatch:only-child { box-shadow: none; }}
     }
@@ -982,9 +904,7 @@ link {
     *:selected & { color: mix($selected_fg_color, $link_color, 80%); }
   }
 
-  &:disabled, &:disabled:backdrop { color: transparentize(desaturate($link_color, 100%), 0.2); }
-
-  &:backdrop { color: transparentize($link_color, 0.1); }
+  &:disabled { color: transparentize(desaturate($link_color, 100%), 0.2); }
 
   @at-root %link_selected,
   &:selected,
@@ -1074,21 +994,6 @@ spinbutton {
         box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
       }
 
-      &:backdrop {
-        color: mix($backdrop_fg_color, $backdrop_base_color, 90%);
-        background-color: transparent;
-        border-color: transparentize($backdrop_borders_color, 0.7);
-        transition: $backdrop_transition;
-      }
-
-      &:backdrop:disabled {
-        color: transparentize($backdrop_insensitive_color,0.7);
-        background-color: transparent;
-        border-style: none none none solid; // It is needed or it gets overridden
-
-        &:dir(rtl) { border-style: none solid none none; }
-      }
-
       &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; }
 
       &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; }
@@ -1123,15 +1028,6 @@ spinbutton {
         box-shadow: none;
       }
 
-      &:backdrop {
-        @include button(undecorated);
-
-        color: $osd_fg_color;
-        border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
-        -gtk-icon-shadow: none;
-        box-shadow: none;
-      }
-
       &:disabled {
         @include button(undecorated);
 
@@ -1157,8 +1053,6 @@ spinbutton {
     // color
     &:disabled { color: $insensitive_fg_color; }
 
-    &:backdrop:disabled { color: $backdrop_insensitive_color; }
-
     &:drop(active) {
       border-color: transparent;
       box-shadow: none;
@@ -1207,8 +1101,6 @@ spinbutton {
     &:active { @include button(osd-active); }
 
     &:disabled { @include button(osd-insensitive); }
-
-    &:backdrop { @include button(osd-backdrop); }
   }
 
   // Misc
@@ -1629,11 +1521,6 @@ treeview.view {
 
       @extend %selected_items;
     }
-
-    &:backdrop, & {
-      border-left-color: $_treeview_backdrop_borders_color;
-      border-top-color: $_treeview_backdrop_borders_color; // doesn't work unfortunatelly
-    }
   }
 
   &:disabled {
@@ -1643,15 +1530,11 @@ treeview.view {
       color: mix($selected_fg_color, $selected_bg_color, 40%);
       &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
     }
-
-    &:backdrop { color: $backdrop_insensitive_color; }
   }
 
   &.separator {
     min-height: 2px;
     color: $_treeview_borders_color;
-
-    &:backdrop { color: transparentize($borders_color, 0.8); }
   }
 
   &:backdrop {
@@ -1689,13 +1572,9 @@ treeview.view {
       color: mix($selected_fg_color, $selected_bg_color, 70%);
 
       &:hover { color: $selected_fg_color; }
-
-      &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 70%); }
     }
 
     &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
-
-    &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
   }
 
   &.progressbar { // progress bar in treeviews
@@ -1725,13 +1604,6 @@ treeview.view {
         }
       }
     }
-
-    &:backdrop {
-      @if $variant == 'light' { color: $backdrop_base_color; }
-
-      background-image: none;
-      box-shadow: none;
-    }
   }
 
   &.trough { // progress bar trough in treeviews
@@ -1807,19 +1679,6 @@ treeview.view {
     background-image: none;
   }
 
-  &:backdrop {
-    color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
-    border-color: $_treeview_backdrop_borders_color;
-    border-style: none solid solid none;
-    background-image: none;
-    background-color: $backdrop_base_color;
-
-    &:disabled {
-      border-color: $backdrop_bg_color;
-      background-image: none;
-    }
-  }
-
   &:last-child { &:backdrop, & { border-right-style: none; }}
 }
 
@@ -1839,11 +1698,6 @@ popover.background {
     background-clip: padding-box;
     border: 1px solid $_popover_border;
     box-shadow: 0 1px 2px transparentize(black, 0.7);
-
-    &:backdrop {
-      background-color: $backdrop_bg_color;
-      box-shadow: none;
-    }
   }
 
   > contents {
@@ -1895,11 +1749,6 @@ notebook {
     border-width: 1px;
     background-color: $dark_fill;
 
-    &:backdrop {
-      border-color: $backdrop_borders_color;
-      background-color: $backdrop_dark_fill;
-    }
-
     > tabs { margin: -1px; }
 
     &.top {
@@ -1909,7 +1758,6 @@ notebook {
         > tab {
           &:hover { box-shadow: inset 0 -3px $borders_color; }
 
-          &:backdrop { box-shadow: none; }
 
           &:checked { box-shadow: inset 0 -3px $selected_bg_color; }
         }
@@ -1923,8 +1771,6 @@ notebook {
         > tab {
           &:hover { box-shadow: inset 0 3px $borders_color; }
 
-          &:backdrop { box-shadow: none; }
-
           &:checked { box-shadow: inset 0 3px $selected_bg_color; }
         }
       }
@@ -1937,8 +1783,6 @@ notebook {
         > tab {
           &:hover { box-shadow: inset -3px 0 $borders_color; }
 
-          &:backdrop { box-shadow: none; }
-
           &:checked { box-shadow: inset -3px 0 $selected_bg_color; }
         }
       }
@@ -1951,8 +1795,6 @@ notebook {
         > tab {
           &:hover { box-shadow: inset 3px 0 $borders_color; }
 
-          &:backdrop { box-shadow: none; }
-
           &:checked { box-shadow: inset 3px 0 $selected_bg_color; }
         }
       }
@@ -2045,15 +1887,6 @@ notebook {
         }
       }
 
-      &:backdrop {
-        color: mix($backdrop_fg_color, $backdrop_bg_color, 60%);
-
-        &.reorderable-page {
-          border-color: transparent;
-          background-color: transparent;
-        }
-      }
-
       &:not(:checked) {
         outline-color: transparent;
       }
@@ -2068,21 +1901,11 @@ notebook {
         }
       }
 
-      &:backdrop:checked {
-        color: $backdrop_fg_color;
-
-        &.reorderable-page {
-          border-color: $backdrop_borders_color;
-          background-color: $backdrop_bg_color;
-        }
-      }
-
       // colors the button like the label, overridden otherwise
       button.flat {
+        color: gtkalpha(currentColor, 0.3);
         &:hover { color: currentColor; }
 
-        &, &:backdrop { color: gtkalpha(currentColor, 0.3); }
-
         padding: 0;
         margin-top: 4px;
         margin-bottom: 4px;
@@ -2154,8 +1977,6 @@ notebook {
 
   > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
     background-color: $base_color;
-
-    &:backdrop { background-color: $backdrop_base_color; }
   }
 }
 
@@ -2175,12 +1996,6 @@ scrollbar {
   &.left { border-right: 1px solid $borders_color; }
   &.right { border-left: 1px solid $borders_color; }
 
-  &:backdrop {
-    background-color: $backdrop_scrollbar_bg_color;
-    border-color: $backdrop_borders_color;
-    transition: $backdrop_transition;
-  }
-
   > range > trough > slider {
     min-width: 6px;
     min-height: 6px;
@@ -2194,8 +2009,6 @@ scrollbar {
 
     &:hover:active { background-color: $scrollbar_slider_active_color; }
 
-    &:backdrop { background-color: $backdrop_scrollbar_slider_color; }
-
     &:disabled { background-color: transparent; }
   }
 
@@ -2283,27 +2096,6 @@ switch {
     text-shadow: none;
   }
 
-  &:backdrop {
-    color: $backdrop_fg_color;
-    border-color: $backdrop_borders_color;
-    background-color: $backdrop_dark_fill;
-    text-shadow: none;
-    transition: $backdrop_transition;
-
-    &:checked {
-      @if $variant == 'light' { color: $backdrop_bg_color; }
-      border-color: if($variant == 'light', $switch_borders_color,
-                                            $switch_borders_color);
-      background-color: $switch_bg_color;
-    }
-
-    &:disabled {
-      color: $backdrop_insensitive_color;
-      border-color: $backdrop_borders_color;
-      background-color: $insensitive_bg_color;
-    }
-  }
-
   > slider {
     margin: -1px;
     min-width: 24px;
@@ -2331,17 +2123,6 @@ switch {
 
   &:disabled > slider { @include button(insensitive); }
 
-  &:backdrop {
-    > slider {
-      transition: $backdrop_transition;
-
-      @include button(backdrop);
-    }
-
-    &:checked > slider { border-color: $switch_borders_color; }
-
-    &:disabled > slider { @include button(backdrop-insensitive); }
-  }
 
   row:selected & {
     outline-color: $alt_focus_border_color;
@@ -2350,8 +2131,6 @@ switch {
       box-shadow: none;
       border-color: $switch_borders_color;
 
-      &:backdrop { border-color: $switch_borders_color; }
-
       > slider { &:checked, & { border-color: $switch_borders_color; } }
     }
   }
@@ -2421,9 +2200,7 @@ radio {
     @each $state, $t in ("", "normal"),
                         (":hover", "hover"),
                         (":active", "active"),
-                        (":disabled", "insensitive"),
-                        (":backdrop", "backdrop"),
-                        (":backdrop:disabled", 'backdrop-insensitive') {
+                        (":disabled", "insensitive") {
       &#{$state} {
         @include check($t, $_c);
       }
@@ -2437,9 +2214,7 @@ radio {
         @each $state, $t in ("", "normal"),
                             (":hover", "hover"),
                             (":active", "active"),
-                            (":disabled", "insensitive"),
-                            (":backdrop", "backdrop"),
-                            (":backdrop:disabled", 'backdrop-insensitive') {
+                            (":disabled", "insensitive") {
           &#{$state} {
             @include check($t, $checkradio_bg_color, $checkradio_fg_color, $checked: true);
           }
@@ -2447,8 +2222,6 @@ radio {
       }
     }
   }
-
-  &:backdrop { transition: $backdrop_transition; }
   
   @if $variant == 'light' {
     // the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background
@@ -2461,7 +2234,6 @@ radio {
 
     &:hover { @include button(osd); }
     &:active { @include button(osd-active); }
-    &:backdrop { @include button(osd-backdrop); }
     &:disabled { @include button(osd-insensitive); }
   }
 }
@@ -2517,17 +2289,6 @@ treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a work
    border-color: $insensitive_borders_color;
   }
 
-  &:backdrop {
-    background-color: $backdrop_dark_fill;
-    border-color: $backdrop_borders_color;
-    transition: $backdrop_transition;
-
-    &:disabled {
-      background-color: $insensitive_bg_color;
-      border-color: $insensitive_borders_color;
-    }
-  }
-
   // ...on selected list rows
   row:selected & {
     &:disabled, & {
@@ -2555,15 +2316,6 @@ treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a work
     border-color: transparent;
   }
 
-  &:backdrop {
-    border-color: if($variant=='light', $selected_bg_color,
-                                        $selected_borders_color);
-    &:disabled {
-      background-color: transparent;
-      border-color: transparent;
-    }
-  }
-
   // ...on selected list rows
   row:selected & { &:disabled, & { border-color: $selected_borders_color; }}
 
@@ -2642,10 +2394,8 @@ scale {
     &:backdrop, & { background-color: $borders_color; }
 
     &:disabled {
-      &:backdrop, & {
-        border-color: transparent;
-        background-color: transparent;
-      }
+      border-color: transparent;
+      background-color: transparent;
     }
 
     // OSD
@@ -2653,10 +2403,8 @@ scale {
       background-color: mix($osd_fg_color, $osd_borders_color, 25%);
 
       &:disabled {
-        &:backdrop, & {
-          border-color: transparent;
-          background-color: transparent;
-        }
+       border-color: transparent;
+       background-color: transparent;
       }
     }
   }
@@ -2675,14 +2423,6 @@ scale {
 
     &:disabled { @include button(insensitive); }
 
-    &:backdrop {
-      transition: $backdrop_transition;
-
-      @include button(backdrop);
-
-      &:disabled { @include button(backdrop-insensitive); }
-    }
-
     // ...on selected list rows
     row:selected & { &:disabled, & { border-color: $selected_borders_color; } }
 
@@ -2706,16 +2446,6 @@ scale {
         @include button(osd-insensitive);
         background-color: opacify($osd_bg_color, 1); // solid background needed here
       }
-
-      &:backdrop {
-        @include button(osd-backdrop);
-        background-color: opacify($osd_bg_color, 1); // solid background needed here
-
-        &:disabled {
-          @include button(osd-backdrop-insensitive);
-          background-color: opacify($osd_bg_color, 1); // solid background needed here
-        }
-      }
     }
   }
 
@@ -3008,11 +2738,6 @@ progressbar {
   color: transparentize($fg_color, 0.6);
   font-feature-settings: "tnum";
 
-  &:backdrop {
-    box-shadow: none;
-    transition: $backdrop_transition;
-  }
-
   > trough { @extend %scale_trough; }
 
   > trough > progress {
@@ -3023,12 +2748,6 @@ progressbar {
       border-color: $insensitive_fg_color;
     }
 
-    &:backdrop:disabled {
-      background-color: $backdrop_insensitive_color;
-      border-color: $backdrop_insensitive_color;
-    }
-
-
     border-radius: 1.5px;
 
     &.left {
@@ -3127,8 +2846,6 @@ levelbar {
     }
   }
 
-  &:backdrop { transition: $backdrop_transition; }
-
   > trough {
     padding: 0;
   }
@@ -3140,29 +2857,22 @@ levelbar {
     &.low {
       border-color: if($variant == 'light', darken($warning_color, 10%), $borders_color);
       background-color: $warning_color;
-
-      &:backdrop { border-color:if($variant == 'light', $warning_color, $borders_color); };
     }
 
     &.high,
     &:not(.empty) {
       border-color: if($variant == 'light', darken($selected_bg_color, 10%), $borders_color);
       background-color: $selected_bg_color;
-
-      &:backdrop { border-color:if($variant == 'light', $selected_bg_color, $borders_color); };
     }
 
     &.full {
       border-color: if($variant == 'light', darken($success_color, 10%), $borders_color);
       background-color: $success_color;
-
-      &:backdrop { border-color: $success_color; };
     }
 
     &.empty {
       background-color: darken($bg_color, 5%);
       border-color: $borders_color;
-      &:backdrop { border-color:if($variant == 'light', transparentize($borders_color,0.7), $borders_color); };
     }
   }
 }
@@ -3178,11 +2888,6 @@ printdialog {
     border: none;
     padding: 0;
 
-    &:backdrop {
-      color: $backdrop_fg_color;
-      border-color: $backdrop_borders_color;
-    }
-
     paper {
       background: white;
       color: #2e3436;
@@ -3207,15 +2912,11 @@ frame,
   border: 1px solid $borders_color;
 
   &.flat { border-style: none; }
-
-  &:backdrop { border-color: $backdrop_borders_color; }
 }
 
 actionbar > revealer >  box {
   padding: 6px;
   border-top: 1px solid $borders_color;
-
-  &:backdrop { border-color: $backdrop_borders_color; }
 }
 
 scrolledwindow {
@@ -3228,26 +2929,18 @@ scrolledwindow {
   > overshoot {
     &.top {
       @include overshoot(top);
-
-      &:backdrop { @include overshoot(top, backdrop); }
     }
 
     &.bottom {
       @include overshoot(bottom);
-
-      &:backdrop { @include overshoot(bottom, backdrop); }
     }
 
     &.left {
       @include overshoot(left);
-
-      &:backdrop { @include overshoot(left, backdrop); }
     }
 
     &.right {
       @include overshoot(right);
-
-      &:backdrop { @include overshoot(right, backdrop); }
     }
   }
 
@@ -3264,19 +2957,6 @@ scrolledwindow {
                   linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px),
                   linear-gradient(to left, transparent 1px, $scrollbar_bg_color 1px);
     }
-
-    &:backdrop {
-      transition: $backdrop_transition;
-      background: $backdrop_borders_color,
-                  linear-gradient(to bottom, transparent 1px, $backdrop_scrollbar_bg_color 1px),
-                  linear-gradient(to right, transparent 1px, $backdrop_scrollbar_bg_color 1px);
-
-      &:dir(rtl) {
-        background: $backdrop_borders_color,
-                    linear-gradient(to bottom, transparent 1px, $backdrop_scrollbar_bg_color 1px),
-                    linear-gradient(to left, transparent 1px, $backdrop_scrollbar_bg_color 1px);
-      }
-    }
   }
 }
 
@@ -3318,8 +2998,6 @@ row {
 
   &:hover { transition: none; }
 
-  &:backdrop { transition: $backdrop_transition; }
-
   &.activatable {
     &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
 
@@ -3327,15 +3005,11 @@ row {
 
     &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
 
-    &:backdrop:hover { background-color: transparent; }
-
     &:selected {
       &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
 
       &.has-open-popup,
       &:hover { background-color: mix($fg_color, $selected_bg_color, 10%); }
-
-      &:backdrop { background-color: $selected_bg_color; }
     }
   }
 
@@ -3361,11 +3035,6 @@ row {
                                                transparent 2px);
   background-clip: padding-box;
 
-  &:backdrop {
-    background-image: none;
-    transition: $backdrop_transition;
-  }
-
   button { @extend %osd_button; }
 
   border { border: none; }
@@ -3382,7 +3051,6 @@ expander {
   &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
 
   &:disabled { color: $insensitive_fg_color; }
-  &:disabled:backdrop { color: $backdrop_insensitive_color; }
 
   &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
 }
@@ -3464,10 +3132,6 @@ calendar {
     }
   }
 
-  &:backdrop {
-    color: $backdrop_text_color;
-    border-color: $backdrop_borders_color;
-  }
 }
 
 
@@ -3522,8 +3186,6 @@ window.dialog.message { // Message Dialog styling
 filechooser {
   .dialog-action-box {
     border-top: 1px solid $borders_color;
-
-    &:backdrop { border-top-color: $backdrop_borders_color; }
   }
 
   #pathbarbox { border-bottom: 1px solid $bg_color; }
@@ -3563,12 +3225,6 @@ filechooserbutton:drop(active) {
     }
   }
 
-  &:backdrop {
-    background-color: $backdrop_sidebar_bg_color;
-    border-color: $backdrop_borders_color;
-    transition: $backdrop_transition;
-  }
-
   list { background-color: transparent; }
 
   paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
@@ -3593,10 +3249,6 @@ stacksidebar {
 
 separator.sidebar {
   background-color: $borders_color;
-
-  &:backdrop {
-    background-color: $backdrop_borders_color;
-  }
 }
 
 
@@ -3625,14 +3277,6 @@ placessidebar {
 
     &:disabled { color: $insensitive_fg_color; }
 
-    &:backdrop {
-      color: $backdrop_fg_color;
-
-      &:selected { color: $backdrop_selected_fg_color; }
-
-      &:disabled { color: $backdrop_insensitive_color; }
-    }
-
     image.sidebar-icon {
       &:dir(ltr) { padding-right: 8px; }
       &:dir(rtl) { padding-left: 8px; }
@@ -3654,9 +3298,6 @@ placessidebar {
       margin-bottom: 3px;
       padding: 0;
       border-radius: 100%;
-
-      &:not(:hover):not(:active),
-      &:backdrop { > image { opacity: $_placesidebar_icons_opacity; }}
     }
 
     // in the sidebar case it makes no sense to click the selected row
@@ -3719,20 +3360,12 @@ paned {
 
     &:selected { background-image: image($selected_bg_color); } // FIXME is this needed?
 
-    &:backdrop { background-image: image($backdrop_borders_color); }
-
     &.wide {
       min-width: 5px;
       min-height: 5px;
       background-color: $bg_color;
       background-image: image($borders_color), image($borders_color);
       background-size: 1px 1px, 1px 1px;
-
-      &:backdrop {
-        background-color: $backdrop_bg_color;
-        background-image: image($backdrop_borders_color),
-                          image($backdrop_borders_color);
-      }
     }
   }
 
@@ -3907,7 +3540,6 @@ colorswatch {
 
       &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
 
-      &:backdrop { color: transparentize(white, 0.5); }
     }
   }
 
@@ -3919,7 +3551,6 @@ colorswatch {
 
       &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
 
-      &:backdrop { color: transparentize(black, 0.5); }
     }
   }
 
@@ -3946,11 +3577,6 @@ colorswatch {
       box-shadow: inset 0 1px transparentize(white, 0.6),
                   inset 0 -1px transparentize(black, 0.8);
     }
-
-    &:backdrop, &:backdrop:hover {
-      border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color);
-      box-shadow: none;
-    }
   }
 
   &#add-color-button {
@@ -3962,8 +3588,6 @@ colorswatch {
       @include button(normal);
 
       &:hover { @include button(hover); }
-
-      &:backdrop { @include button(backdrop); }
     }
   }
 
@@ -4002,8 +3626,6 @@ colorchooser .popover.osd { border-radius: 5px; }
 
   &:hover { -gtk-icon-filter: brightness(1.2); }
 
-  &:backdrop { background-color: darken($bg_color,7%); }
-
   > rubberband { @extend rubberband; }
 }
 
@@ -4021,8 +3643,6 @@ colorchooser .popover.osd { border-radius: 5px; }
       background-color: transparentize($fg_color,0.9);
       border-radius: 5px;
     }
-
-    &:backdrop { &:hover, &:disabled, & { @extend %undecorated_button; }}
   }
 }
 
@@ -4190,11 +3810,6 @@ shortcut > .keycap {
   box-shadow: if($variant == 'light', inset 0 -3px mix($base_color, $bg_color, 20%), inset 0 -3px mix($borders_color, $base_color, 60%));
   font-size: smaller;
 
-  &:backdrop {
-    background-color: $backdrop_base_color;
-    color: $backdrop_fg_color;
-    transition: $backdrop_transition;
-  }
 }
 
 :not(decoration):not(window):drop(active):focus,
@@ -4266,7 +3881,6 @@ button.emoji-section {
   &:dir(ltr):not(:last-child) { margin-right: 0; }
   &:dir(rtl):not(:last-child) { margin-left: 0; }
 
-  &:backdrop:not(:checked) { border-color: transparent; }
   &:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); }
   &:checked { border-color: $selected_bg_color; }
 
@@ -4316,8 +3930,6 @@ menubar {
   padding: 0px;
   box-shadow: inset 0 -1px transparentize(black, 0.9);
 
-  &:backdrop { background-color: $backdrop_bg_color; }
-
   > item {
     min-height: 16px;
     padding: 4px 8px;